import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;
export class HeadTab extends Component {
	constructor(props) {
		super(props);
	}

	/* 
		data:数据   
		initIndex：初始化
		tabClick：点击 
	*/
	render () {
		let imgObj = require('../../../../imgs/apply/triangle.png');
		let { data, tabClick, initIndex } = this.props;
		return (
			<View style={styles.tabTop}>
				{
					data.map((item, index) => {
						return (
							<TouchableOpacity activeOpacity={1} key={index} 
								onPress={() => { item.singClick ? item.singClick(index) : (tabClick && tabClick(index)) }} 
								style={initIndex == index?styles.tabBoxActive:styles.tabBox}>
								<Text style={initIndex == index?styles.TabTextActive:styles.TabText}>{item.title}</Text>
								{/* {
									initIndex == index ? <Image source={imgObj} /> : null
								} */}
							</TouchableOpacity>
						)
					})
				}
			</View >
		)
	}
}
const styles = StyleSheet.create({
	tabTop: {
		height: 40 * scale,
		backgroundColor: style.color.themeColor,
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center'
	},
	tabBox: {
		flex: 1,
		height: 40 * scale,
		marginTop: 5 * scale,
		paddingTop:10*scale,
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	tabBoxActive:{
		flex: 1,
		height: 40 * scale,
		marginTop: 5 * scale,
		alignItems: 'center',
		paddingTop:10*scale,
		justifyContent: 'space-between',
		backgroundColor:'#fff',
		borderTopLeftRadius:5*scale,
		borderTopRightRadius:5*scale,
	},
	TabText: {
		fontSize: 14 * scale,
		color: style.color.white,
		textAlign: 'center'
	},
	TabTextActive:{
		fontSize: 14 * scale,
		color: '#187bff',
		textAlign: 'center',
		fontWeight:'600'
	}
})